<template>
  <div>
    <el-popover v-model="cronPopover">
      <vue-cron i18n="en"
                ref="vuecron"
                @change="changeCron"
                @close="cronPopover=false"></vue-cron>
      <el-input slot="reference"
                v-model="dataForm[scriptItem.text]"
                :placeholder="scriptItem.hint"
                @click="showData()"></el-input>
    </el-popover>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      keys: ['day',
        'hour',
        'minute',
        'month',
        'output',
        'second',
        'week',
        'year'],
      cronPopover: false
    }
  },
  mounted () {
    this.keys.forEach(item => {
      Object.assign(this.$refs.vuecron.$data[item], JSON.parse(this.dataForm[this.scriptItem.showData])[item])
    })
  },
  methods: {
    showData () {
      this.cronPopover = true
      this.keys.forEach(item => {
        Object.assign(this.$refs.vuecron.$data[item], JSON.parse(this.dataForm[this.scriptItem.showData])[item])
      })
    },
    changeCron (val) {
      let JSONBoject = {}
      this.keys.forEach(item => {
        JSONBoject[item] = this.$refs.vuecron.$data[item]
      })
      this.dataForm[this.scriptItem.showData] = JSON.stringify(JSONBoject)
      this.dataForm[this.scriptItem.text] = val.cron
    }
  }
}
</script>

<style scoped>
#changeContab ::v-deep #tab-0 { display: none; }
</style>
